<template>
    <div>
        <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column prop="roleId" label="角色ID" width="100" align="center">
            </el-table-column>
            <el-table-column prop="roleName" label="角色名称" align="center">
            </el-table-column>
            <el-table-column label="对应权限" align="center">
                <template slot-scope="scope">
                    {{QueryPermissionByRole(scope.row)}}
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center" :formatter="formatter">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handlePermission(scope.$index, scope.row)">分配权限</el-button>
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog width="40%" :destroy-on-close="true" :visible.sync="dialogVisible.add">
            <span slot="title">添加角色</span>
            <role-add ref="roleAdd" @OnSave="SaveSucess"></role-add>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible.add = false">取 消</el-button>
                <el-button type="primary" @click="$refs.roleAdd.submitForm('ruleForm')">保 存</el-button>
            </span>
        </el-dialog>
        <el-dialog width="40%" v-if="dialogVisible.edit" :destroy-on-close="true" :visible.sync="dialogVisible.edit">
            <span slot="title">编辑角色</span>
            <role-edit ref="roleEdit" :roleId="roleId" @OnSave="SaveSucess"></role-edit>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible.edit = false">取 消</el-button>
                <el-button type="primary" @click="$refs.roleEdit.submitForm('ruleForm')">保 存</el-button>
            </span>
        </el-dialog>
        <el-dialog width="40%" v-if="dialogVisible.permission" :destroy-on-close="true"
            :visible.sync="dialogVisible.permission">
            <span slot="title">分配权限</span>
            <assign-permission ref="assignPermission" :roleId="roleId" @OnSave="SaveSucess"></assign-permission>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible.permission = false">取 消</el-button>
                <el-button type="primary" @click="$refs.assignPermission.submitForm('ruleForm')">保 存</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { Query, QueryPermission } from '../../api/role';
    import roleAdd from './roleAdd';
    import roleEdit from './roleEdit';
    import assignPermission from './assignPermission';
    import moment from 'moment';
    export default {
        name: 'RbacUiRole',
        components: {
            roleAdd,
            roleEdit,
            assignPermission
        },
        data() {
            return {
                tableData: [],
                dialogVisible: {
                    add: false,
                    edit: false,
                    permission: false
                },
                roleId: 0,
                multipleSelection: [],
                permissionData: []
            };
        },

        mounted() {
            this.$emit('setTitle', this.$route.meta.title)
            this.initData();
        },

        methods: {
            initData() {
                QueryPermission().then(m => {                    
                    this.permissionData = m.data;
                });
                Query().then(x => {
                    this.tableData = x.data;
                });
            },
            formatter(row, column, cellValue, index) {
                return cellValue == null ? '-' : moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
            },
            handleEdit(index, row) {
                this.roleId = row.roleId;
                this.dialogVisible.edit = true;
            },
            handlePermission(index, row) {
                this.roleId = row.roleId;
                this.dialogVisible.permission = true;
            },
            handleDelete(index, row) {
                let _this = this;
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            onSearch() {
                this.initData();
            },
            SaveSucess(res, formName) {
                //formName == 'add' ? this.dialogVisible.add = false : this.dialogVisible.edit = false;
                this.dialogVisible.permission = false;
                this.initData();
            },
            ManyDelete() {
                let _this = this;
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            BulkDelete() {
                let _this = this;
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            QueryPermissionByRole(row) {
                //string.Join(",", permission.Where(p => p.RoleId == m.RoleId).Select(m => m.MenuName));
                return this.permissionData.filter(m=>m.roleId == row.roleId).map(x=>x.menuName).toString();
            }
        },
    };
</script>

<style>
    .demo-form-inline {
        padding-left: 30px;
    }

    .line {
        text-align: center;
    }

    .page {
        margin: 16px auto;
        display: table;
    }
</style>